<template>
  <div style="background:#eeeeee">
    <div class="recodeTop whiteDiv">
      <p>
        <span class="strongNum">{{dispatch_no}}</span>
        <span style="padding-right: .6rem;">{{name}}</span>
      </p>
      <p>
        <span>总费用：
          <label class="redStrong">{{totalCost}}</label>
        </span>
        <span>总审核金额：
          <label class="redStrong">{{totalConfirmAmount}}</label>
        </span>
      </p>
    </div>
    <div v-for="(item,index) in costs" class="recodeCenter whiteDiv" @click='openPop(item.fee_name)'>
      <p class="costsList">
        <label>
          <span>
            {{item.total_amount}}
          </span>
          <span class="gray">
            {{item.fee_name}}
          </span>
        </label>
        <label v-if="item.confirm_amount">
          <span>
            {{item.occur_time}}
          </span>
          <span class="gray">
            发生时间
          </span>
        </label>
        <label v-else style="padding-right: 3.65625rem; ">
          <span>
            {{item.occur_time}}
          </span>
          <span class="gray">
            发生时间
          </span>
        </label>
        <label v-if="item.confirm_amount">
          <span class="redStrong">
            {{item.confirm_amount}}
          </span>
          <span class="gray">
            审核金额
          </span>
        </label>
      </p>
      <p class="gray">已上传[{{item.attach_count}}]张照片</p>

    </div>

    <mt-popup v-model="popupVisible" class="costPop" position='bottom' style="bottom: .4rem;">

      <div style="display:flex;display:-webkit-flex;flex-direction:column;justify-content:space-between;height:100%">
        <div>
          <div class="popTitle">费用维护</div>
          <div class="row">
            <div class="left">费用名称:</div>
            <div class="right">
              <input v-model="upload.costName" readonly />
            </div>
          </div>
          <div class="row">
            <div class="left">发生日期:</div>
            <div class="right">
              <input v-model="upload.happenDate" readonly @click='openFromPicker' />
            </div>
          </div>
          <div class="row">
            <div class="left">发生时间:</div>
            <div class="right">
              <input v-model="upload.happenTime" readonly @click='openTimePicker' />
            </div>
          </div>
          <div class="row" style="height:auto;margin-top:0.3rem;">
            <div class="left">拍照上传:</div>
            <div class="right">
              <img class="paizhao" @click="paizhao()" src="../../../../static/images/icon/camera.png" />
              <div class="img_wrap_wrap">
                <div v-for="(imgsrc,index) in urlList" class="img_wrap">
                  <img :src="imgsrc" />
                  <i class="delete" @click="deletImg(index)"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <mt-button @click='saveCost' type="primary" size='large'>保存</mt-button>
      </div>


    </mt-popup>

    <mt-datetime-picker v-model='dateFromDate' ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" @confirm="upload.happenDate=dateFromDate.Format('yyyy-MM-dd'); " :endDate='new Date()'>
    </mt-datetime-picker>
    <mt-datetime-picker ref="TimePicker" @confirm="upload.happenTime=dateFromTime" type="time" v-model="dateFromTime">
    </mt-datetime-picker>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        getDate: {}, //上个页面传过来的参数
        name: '', //客户名字
        totalCost: '', //总费用
        totalConfirmAmount: '', //总深恶金额
        dispatch_no: '', //订单号
        costs: [], //中间列表的数组      
        popupVisible: false, //控制详细弹窗
        urlList: [], //存储本地图片路径,用于展示图片,
        dateFromTime: '', //过度用时间,无实际作用
        dateFromDate: '', //过度用日期,无实际作用
        entryList:[],//存储上传图片路径,用于上传
        upload: { //弹出框的参数
          costName: '', //  费用名称，
          happenDate: '',
          happenTime: ''
        },


        date: '',
        time: ''
      }
    },
    mounted() {
      this.getDate = JSON.parse(sessionStorage.getItem('detailCost'));
      this.name = this.getDate.name;
      this.totalCost = this.getDate.totalCost;
      this.totalConfirmAmount = this.getDate.totalConfirmAmount;
      this.dispatch_no = this.getDate.dispatch_no;
      this.init();

    },
    methods: {
      init() {    //初始化数据
        this.$api.post('/wechat/dispatchOrderCost', this.getDate, (data) => {
          console.log(data);
          console.log('这里');
          this.costs = data.obj.costs.list;
          console.log(this.costs);
        }, function (error) {
          alert(error.msg)
        })
      },
      paizhao() {  //拍照
        this.$api.getImage((entry, url) => {
          this.entryList.push(entry);
          this.urlList.push(url);
        })
      },
      deletImg(index) {  //删除照片
        this.entryList.splice(index, 1);
        this.urlList.splice(index, 1);
      },
      openPop(name) {  //打开弹窗
        this.popupVisible = true;
        this.getNowDate();
        this.upload.costName = name;
      },
      openFromPicker() {
        this.$refs.fromDatepicker.open();
      },
      openTimePicker() {
        this.$refs.TimePicker.open();
      },
      getNowDate() { //获取当前时间
      
        this.upload.happenDate = this.$api.formatData(new Date());
        this.dateFromDate = this.$api.formatData(new Date());
        this.upload.happenTime = this.$api.formatTime(new Date());
        this.dateFromTime = this.$api.formatTime(new Date());
      },
      upImg(){
        if(!this.entryList.length){
          return;
        }
        this.entryList.forEach(element => {
          var params = {
          dispatch_no:this.getDate.dispatch_no,
          file:element,
          source_unique_no: this.getDate.unique_no,
        };
        this.$api.createUpload('/wechat/costFileUpload',params,(data)=>{
          console.log('imgupload',JSON.stringify(data))
        });
        })
      },
      saveCost(){   //保存按钮
        this. upImg();
      }
    }
  }

</script>
<style scoped>
  .whiteDiv {
    background: #fff;
    padding: 0.3125rem;
  }

  .recodeTop {
    margin-bottom: 1px;
  }

  .recodeTop p {
    display: flex;
    justify-content: space-between;
  }

  .recodeCenter {
    text-align: left;margin-bottom: .2rem;
  }

  .strongNum {
    font-size: .4rem;
    font-weight: bold;
  }

  .redStrong {
    color: red;
    font-weight: bold;
  }

  .costsList {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
  }

  .costsList label {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }

  .costsList label span {
    margin-bottom: .1rem
  }

  .gray {
    color: #80808f;
  }

  .confirmAmount span {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }

  .row {
    display: flex;
    height: 1rem;
  }

  .row .left {
    width: 2.5rem;
    text-align: right;
    line-height: 0.9rem;
    height: 0.9rem;
  }

  .row .right {
    width: 6rem;
    margin-left: 0.2rem;
    text-align: left;
  }

  .row .right input {
    height: 0.9rem;
    line-height: 0.9rem;
    padding-left: 0.1rem;
    border: none;
    outline: none;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }

  .paizhao {
    width: 1.2rem;
  }

  .img_wrap_wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .img_wrap {
    position: relative;
    width: 1.2rem;
    margin-right: 0.3rem;
  }

  .img_wrap img {
    width: 100%;
  }

  .delete {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url('../../../../static/images/other/delete.png');
    background-size: 100% 100%;
    width: 0.5rem;
    height: 0.5rem;

  }
  .costPop {
    border-radius: 0.2rem;
    height: 10rem;
    overflow: auto;
    padding: 0.1rem 0.2rem;
  }

  .popTitle {
    height: 2rem;
    font-size: .5rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
  }

</style>
